<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>累计访问:{{count}}</span>
      </div>
      <el-table :data="recordTable" style="width: 100%" stripe border height="30rem">
        <el-table-column type="expand" fixed>
          <template slot-scope="props">
            <el-form>
              <el-form-item label="pointX">
                <span>{{ props.row.pointX}}</span>
              </el-form-item>
            </el-form>
            <el-form>
              <el-form-item label="pointY">
                <span>{{ props.row.pointY}}</span>
              </el-form-item>
            </el-form>
            <el-form>
              <el-form-item label="UA">
                <span>{{ props.row.userAgent.substr(0,30)}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="Ip" fit></el-table-column>
        <el-table-column prop="location" label="位置"></el-table-column>
        <el-table-column prop="updatedAt" label="时间"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { SHA1 } from '../lib/SHA1.js'
export default {
  data () {
    return {
      recordTable: [{ ip: '', city: '', province: '', pointX: '', pointY: '', updatedAt: '', userAgent: '', location: '' }],
      count: 0
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      const appId = 'A6046330600069'
      const now = Date.now()
      const appKey = SHA1(appId + 'UZ' + 'C6757733-382B-5724-AF8B-C76DC0BD53AF' + 'UZ' + now) + '.' + now
      const filter = {
        order: 'updatedAt DESC'
      }
      this.$http.get('https://d.apicloud.com/mcm/api/Visitor?filter=' + encodeURIComponent(JSON.stringify(filter)), { headers: { 'X-APICloud-AppId': appId, 'X-APICloud-AppKey': appKey } }).then(res => {
        this.recordTable = res.data
        this.$http.get('https://d.apicloud.com/mcm/api/Visitor/count', { headers: { 'X-APICloud-AppId': appId, 'X-APICloud-AppKey': appKey } }).then(res => {
          this.count = res.data.count
        })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.container {
}

.el-table {
}
</style>
